<template>
    <div class="page_title">
        <p>子账号管理</p>
        <el-button type="primary" @click="add">新增</el-button>
    </div>
    <el-table :data="list">
        <el-table-column label="单位名称" prop="company_name"></el-table-column>
        <el-table-column label="子账号" prop="username"></el-table-column>
        <el-table-column label="状态" prop="username">
            <template #default="scope">
                <div v-for="item in status" :key="item.id">
                    <span v-if="item.id === scope.row.status">{{item.label}}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="使用者" prop="nickname"></el-table-column>
        <el-table-column label="登录地址" prop="url"></el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size='mini' :type="scope.row.status ? 'primary' : 'info'" @click="edit_status(scope.row)">{{scope.row.status ? '禁用' : '启用'}}</el-button>
                <el-button size='mini' @click="del(scope.row)">删除</el-button>
                <el-button size='mini' @click="edit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        @size-change="size_change"
        @current-change="current_change"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total_count"
    ></el-pagination>
    <el-dialog
        width="30%"
        v-model="is_account"
        :title="title"
        :close-on-press-escape='false'
        :close-on-click-modal='false'
        :show-close='false'
        center
    >
        <el-form :model="account_info" label-position='right' label-width="80px" size='small'>
            <el-form-item label="单位名称">
                <el-select v-model="account_info.company_id" placeholder="请输入内容">
                    <el-option
                        v-for="item in unit_list"
                        :key="item.company_id"
                        :label="item.company_name"
                        :value="item.company_id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="账号">
                <el-input v-model="account_info.username" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="account_info.password" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="用户姓名">
                <el-input v-model="account_info.nickname" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="用户头像">
                <el-upload
                    class="avatar-uploader"
                    action="https://up-na0.qiniup.com/"
                    :show-file-list='false'
                    :data='{token}'
                    :on-success='get_face'
                >
                    <img v-if="account_info.face" :src="account_info.face" class="avatar">
                    <i v-if="account_info.face" @click.stop="account_info.face = undefined" class="el-icon-close"></i>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="info" round @click="cancel">取消</el-button>
            <el-button type="primary" round @click="confirm">确定</el-button>
        </template>
    </el-dialog>
</template>

<script lang="js">
import { defineComponent, reactive, toRefs } from 'vue'
import { child_list, set_status, unit_statistics, get_qiniu, add_manages, edit_manages, del_manages } from './../../utils/api'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
    setup() {
        let state = reactive({
            status: [{
                id: 0,
                label: '禁用'
            }, {
                id: 1,
                label: '启用'
            }],
            form: {
                pagesize: 10,
                page: 1
            },
            total_count: 0,
            list: [],
            unit_list: [],
            is_add: false,
            title: '新建子账号',
            is_account: false,
            account_info: {
                face: undefined,
                nickname: undefined,
                username: undefined,
                company_id: undefined,
                manage_id: undefined,
                password: undefined
            },
            url: undefined,
            token: undefined
        })

        get_qiniu().then(({ data }) => {
            if(data.code === 1000) {
                state.url = data.data.url
                state.token = data.data.token
            }
        })
        // 初始化
        const init = () => {
            child_list(state.form).then(({ data }) => {
                if(data.code === 1000) {
                    state.total_count = data.data.total_count
                    state.list = data.data.data
                }
            })
        }
        // 分页
        const size_change = size => {
            state.form.page = 1
            state.form.pagesize = size
            init()
        }
        const current_change = page => {
           state.form.page = page
           init()
           window.scrollTo(0, 0)
        }
        // 设置用户状态
        const edit_status = item => {
            let params = {
                manage_id: item.id,
                status: item.status ? 0 : 1
            }
            set_status(params).then(({ data }) => {
                if(data.code === 1000) {
                    ElMessage.success({
                        type: 'success',
                        message: data.msg
                    })
                    init()
                }
            })
        }
        // 获取单位
        const get_unit = () => {
            unit_statistics().then(({ data }) => {
                if(data.code === 1000) {
                    state.unit_list = data.data
                }
            })
        }
        // 用户头像
        const get_face = file => {
            state.account_info.face = `${state.url}${file.key}`
        }
        // 新增
        const add = () => {
            state.is_add = true
            state.is_account = true
            state.title = '新建子账号'
        }
        // 编辑
        const edit = item => {
            state.is_add = false
            state.title = '编辑子账号'
            state.is_account = true;
            state.account_info.manage_id = item.id
            state.account_info.face = item.face
            state.account_info.username = item.username
            state.account_info.nickname = item.nickname
            state.account_info.company_id = item.company_id
        }
        // 删除
        const del = item => {
            ElMessageBox.confirm(`确认删除${item.username}？`, '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                del_manages({manage_id: item.id}).then(({ data }) => {
                    if(data.code === 1000) {
                        ElMessage.success({
                            type: 'success',
                            message: data.msg
                        })
                        init()
                    }
                })
            })
        }
        // 取消
        const cancel = () => {
            state.account_info = {
                face: undefined,
                nickname: undefined,
                username: undefined,
                company_id: undefined,
                manage_id: undefined,
                password: undefined
            }
            state.is_account = false
        }
        // 确认
        const confirm = () => {
            if(state.is_add) {
                add_manages(state.account_info).then(({ data }) => {
                    if(data.code === 1000) {
                        ElMessage.success({
                            type: 'success',
                            message: data.msg
                        })
                        init()
                        cancel()
                    }
                })
            } else {
                edit_manages(state.account_info).then(({ data }) => {
                    if(data.code === 1000) {
                        ElMessage.success({
                            type: 'success',
                            message: data.msg
                        })
                        init()
                        cancel()
                    }
                })
            }
        }

        init()
        get_unit()
        return {
            ...toRefs(state),
            size_change,
            current_change,
            edit_status,
            get_face,
            cancel,
            add,
            del,
            edit,
            confirm
        }
    }
})
</script>

<style lang="scss" scoped>
.page_title{
    display: flex;
    justify-content: space-between;
    p{
        align-self: center;
    }
}
</style>